@import '../../assets/css/base.scss';
.add-modal{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: $bg-mask;
	z-index: 999;
	.wraper{
		width: 500px;
		background: #fff;
		border-radius: 5px;
		position: relative;
	}
	h3{
		padding: 50px 50px 0;
		margin: 0;
	}
	.body{
		padding: 20px 50px 50px;
		max-height: 400px;
		overflow-y: auto;
	}
	.foot{
		padding: 30px 50px;
		background: #f4f3f7;
		border-radius: 0 0 5px 5px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.c-btn{
		height: $form-height-base;
		margin: 0 15px;
		background: none;
		border: solid 1px #ddd;
		color: #999;
		flex: 1;
		border-radius: 5px;
		cursor: pointer;
		display: inlin-flex;
		align-items: center;
		justify-content: center;
		&:first-of-type{
			margin-left: 0;
		}
		&:last-of-type{
			margin-right: 0;
		}
		&:hover:not(.c-btn-main){
			color: inherit;
			border-color: #ccc;
		}
	}
	.gradient-primary{
		border:0;
	}
	.del{
		position: absolute;
		color: #fff;
		border: solid 1px #fff;
		display: flex;
		width: 34px;
		height: 34px;
		left: 50%;
		bottom: -80px;
		margin-left: -17px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		font-size: 1.2em;
		opacity: .4;
		cursor: pointer;
		z-index: -1;
		&:hover{
			opacity: 1;
		}
		&::before{
			content: '';
			display: block;
			width: 1px;
			background: #fff;
			height: 50px;
			bottom: 100%;
			left: 50%;
			position: absolute;
		}
	}
}